<template>
	<view class="placeOrder-page">
		<view class="order-status" v-if="isLoginType==1">
			<!-- 技师登陆后显示的状态 -->
			<template v-for="(v,j) in statusList" :key="j">
				<text v-if="infoData.status==v.value">订单状态：{{v.text1}}</text>
			</template>
		</view>
		<view class="order-status" v-if="isLoginType==2">
			<template v-for="(v,j) in statusList" :key="j">
				<text v-if="infoData.status==v.value">订单状态：{{v.text}}</text>
			</template>
		</view>
		<view class="order-header flex-y-center">
			<view class="icon-box">
				<uv-icon name="account" color="#666" size="24"></uv-icon>
			</view>
			<view class="user-name flex-grow-1">{{infoData.appUserName}}</view>
			<view class="order-phone">
				<text>{{infoData.appPhonenumber}}</text>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
			<image class="line" src="/static/images/line.png" mode="widthFix"></image>
		</view>
		<view class="good-item flex-y-center">
			<view class="good-image">
				<uv-image :src="infoData.servicePath" mode="aspectFill" width="100%" height="100%"></uv-image>
			</view>
			<view class="good-cont flex-grow-1">
				<view class="good-name">
					{{infoData.serviceName}}
				</view>
				<view class="price">
					￥{{infoData.orderPrice}}
				</view>
			</view>
			<view class="number">x1</view>
		</view>
		<view class="order-form">
			<view class="form-remark">
				<view class="order-name flex-grow-0">
					备注
				</view>
				<view class="order-input">
					{{infoData.remark}}
				</view>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					服务技师
				</view>
				<view class="order-input">
					技师1号
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					服务方式
				</view>
				<view class="order-input">
					{{infoData.serveType}}
				</view>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					服务时间预约
				</view>
				<view class="order-input">
					{{infoData.serveDate}}
				</view>
				<uv-icon color="#666" name="arrow-right"></uv-icon>
			</view>

			<view class="form-item" style="margin-top: 20rpx;">
				<view class="order-name flex-grow-0">
					订单号
				</view>
				<view class="order-input">
					{{infoData.orderNo}}
				</view>
			</view>
			<view class="form-item">
				<view class="order-name flex-grow-0">
					下单时间
				</view>
				<view class="order-input">
					{{infoData.createTime}}
				</view>
			</view>
		</view>
		<view class="" style="height:120rpx;"></view>
		<view class="foot-btn">
			<button class="btn btn1" @click="callPhone(infoData)">{{isLoginType==2?'联系店家':'联系客户'}}</button>
			<button class="btn btn1" v-if="isLoginType==2&&infoData.status==0" 
				@click="modifyOrder(infoData.orderId,4)">取消预约</button>	
			<button class="btn" v-if="isLoginType==2&&infoData.status==0"
				@click="gotoCode(infoData.verificationCode)">到店使用</button>
			<button class="btn" v-if="isLoginType==1&&infoData.status==0"
				@click="Scanthecode(infoData.orderId)">扫码核销</button>
				<button class="btn" v-if="isLoginType==1&&infoData.status==1"
				@click="modifyOrder(infoData.orderId,2)">确认服务</button>
			<button class="btn btn1" v-if="isLoginType==1&&infoData.isJsEvaluate=='0'&&infoData.status>2"
				@click="gotoevaluate(infoData)">去评价</button>
			<!-- 用户去评价 -->
			<button class="btn btn1" v-if="isLoginType==2&&infoData.status>1&&infoData.isUserEvaluate=='0'"
				@click="gotoevaluate(infoData)">去评价</button>
			<button class="btn" v-if="isLoginType==1&&infoData.status==2"
				@click="modifyOrder(infoData.orderId,3)">结束服务</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					remark: null, //备注
					appointment: '',
				},
				statusList: [
					{
						value: 0,
						text: "已预约",
						text1: '待核销'
					},
					{
						value: 1,
						text: "待服务",
						text1: '待服务'
					},
					{
						value: 2,
						text: "服务中",
						text1: '服务中'
					},
					{
						value: 3,
						text: "已完成",
						text1: '已完成'
					},
					{
						value: 4,
						text: "已取消",
						text1: '已取消'
					},
				],
				radio: '',
				switchVal: false,
				datetime: new Date(),
				orderId: null, //訂單id
				infoData: {},
				userInfo: {},
				isLoginType: 2,
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
		},
		mounted() {
			this.isLoginType = this.$store.state.isLoginType
			console.log(this.isLoginType)
			this.userInfo = this.$store.state.userInfo
			this.getdata()
		},
		methods: {
			async getdata() {
				const {
					code,
					data
				} = await this.muajax.getOrderId({}, {
					urlRewrite: url => `${url}/${this.orderId}`
				});
				this.infoData = data
				this.infoData.status=Number(this.infoData.status)
			},
			//跳转到二维码页面
			gotoCode(verificationCode) {
				uni.navigateTo({
					url: '/pages/order/QRcode?verificationCode=' + verificationCode
				})
			},

			async modifyOrder(item, num) {
				let title=null
				if(num==2){
					title='是否开始服务？'
				}else if(num==3){
					title='是否结束服务？'
				}else{
					title='是否取消预约？'
				}
				uni.showModal({
					title: '提示',
					content:title,
					success: res => {
						if (res.confirm) {
							this.muajax.modifyOrder({
								orderId: item,
								status: num,
							}).then(data => {
								if (data.code = 200) {
									this.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				

				console.log(data)
			},
			callPhone(item) {
				// 判断店家手机号和商家手机号
				uni.makePhoneCall({
					phoneNumber: this.isLoginType == 2 ? item.phonenumber : item.appPhonenumber
				})
			},
			gotoevaluate(item) {
				console.log(item)
				if (this.isLoginType == 2) {
					uni.navigateTo({
						url: `/pages/order/order-evaluate?orderId=${item.orderId}&&appUserId=${item.appUserId}&&userId=${item.userId}`
					})
				} else {
					uni.navigateTo({
						url: `/technicianPages/order/order-evaluate?orderId=${item.orderId}&&appUserId=${item.appUserId}&&userId=${item.userId}`
					})
				}

			},
			// 扫码核销
			Scanthecode(orderId) {
				uni.scanCode({
					onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择
					scanType: ['qrCode', 'barCode'], // 扫码类型，可以指定二维码、条形码等
					success: (res) => {
						console.log('扫码结果:', res.result);
						this.submitverificationCode(orderId, res.result)
					},
					fail: (err) => {
						console.error('扫码失败:', err);
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						});
					}
				});
			},
			//核销订单
			async submitverificationCode(orderId, verificationCode) {
				let res = await this.muajax.verificationCode({
					verificationCode,
					orderId
				});
				if (res.code == 200) {
					this.getdata()
					// this.getList()
				}
			},
			async modifyOrder(item, num) {
				console.log(1)
				uni.showModal({
					title: '提示',
					content: num == 4 ? '是否取消预约？' : '是否结束服务？',
					success: res => {
						if (res.confirm) {
							this.muajax.modifyOrder({
								orderId: item,
								status: num,
							}).then(data => {
								if (data.code = 200) {
									this.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

				console.log(data)
			},
		}
	}
</script>

<style scoped lang="less">
	.order-header {
		justify-content: space-between;
		height: 120rpx;
		background: #fff;
		padding: 0px 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		position: relative;

		.line {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;

		}

		.user-name {
			text-align: left;
		}

		.order-phone {
			display: flex;
			align-items: center;
			color: #666;
		}
	}

	.good-item {
		margin: 20rpx 0px;
		padding: 20rpx 30rpx;
		background: #fff;

		.good-image {
			width: 144rpx;
			height: 144rpx;
			margin-right: 35rpx;
		}

		.good-name {
			font-size: 32rpx;
			margin-bottom: 45rpx;
		}

		.number {
			color: #666666;
			font-size: 36rpx;
		}

		.price {
			color: #666666;
		}
	}

	.order-form {
		.form-remark {
			margin-bottom: 20rpx;
			background: #fff;
			padding: 20rpx 30rpx;

			.order-name {
				height: 75rpx;
				line-height: 75rpx;
			}

			.order-input {
				background-color: #f1f1f1;
				border-radius: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;

			}
		}

		.form-item {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 20rpx 30rpx;
			height: 75rpx;
			border-bottom: 1px solid #f1f1f1;

			.order-input {
				flex-grow: 1;
				flex-shrink: 1;
				text-align: right;
				border: 0px;
			}
		}

	}

	.foot-btn {
		position: fixed;
		bottom: 0px;
		width: 750rpx;
		z-index: 999;
		display: flex;
		background: #fff;
		height: 120rpx;
		align-items: center;
		justify-content: flex-end;
		// justify-content: space-between;
		// justify-content: right;
		padding: 0px 30rpx;
		box-sizing: border-box;

	}
	
	
	.btn {
		height: 61rpx;
		background-color: #00c6c3;
		border-radius: 30rpx;
		text-align: center;
		line-height: 61rpx;
		color: #fff;
		margin: 0px;
		margin-left: 20rpx;
		transition: all 0.3s;
		opacity: 0.8;
	
		&::after {
			border: none;
		}
	
		&:hover,
		&:active {
			opacity: 1;
		}
	}
	
	.btn1 {
		border: 1px solid #f1f1f1;
		background: none;
		color: #666666;
		line-height: 59rpx;
	
		&:hover,
		&:active {
			border: 1px solid #00c6c3;
			color: #00c6c3;
			background: none;
		}
	}
	
	.order-status{
		height: 120rpx;
		padding: 0px 20rpx;
		line-height: 120rpx;
		color: #FFF;
		background: #00c6c3;
	}
</style>